<template>
    <el-input size="large" class="text" v-model="model" clearable @focus="focusMobile" @blur="blurMobile" />
    <!-- 键盘 -->
    <div class="el-drawer keyboard" v-if="isKeyboard" >
      <number-keyboard @onChange="onChange" @onKeyPress="onkeyPress" :input="model" />
    </div>
  </template>
  <script setup lang="ts">
  import { ref, nextTick ,watch} from 'vue'
  import numberKeyboard from "../../../tools/sinpleKeyboard.vue";
  type propt = {
    defVal:string
  }
  const props = withDefaults(defineProps<propt>(),{
    defVal:''
  })
  const closeFlag = ref(false);
  let model = ref('');
  let isKeyboard = ref(false);
  // 键盘按键的值
  const onChange = (e: any) => {
    if (closeFlag.value) {
      model.value = model.value+e;
      closeFlag.value = false
    } else {
      model.value = e;
    }
    emit("inputVal",e);
  };
  
  watch(()=>props.defVal,(val:any)=>{
    closeFlag.value = true;
    model.value = val.value;
  })
  
  // 键盘按键为完成和关闭时隐藏键盘
  const onkeyPress = (button: any) => {
    if (button === "{enter}") {
      emit("closeVal",{isOk:true,value:model.value});
      isKeyboard.value = false;
    } else if(button === "{close}") {
      emit("closeVal",{isOk:false,value:model.value});
      isKeyboard.value = false;
    } else {
  
    }
  };
  const emit = defineEmits(["inputVal", "closeVal"]);
  const focusMobile = () => {
    nextTick(() => {
      isKeyboard.value = true;
      model.value = model.value
    });
  };
  const blurMobile = () => {};
  </script>
  
  <style scoped lang="less">
  .el-drawer {
    // position: fixed; 
    width: 50vw;
    height: 35vh;
    bottom: 0;
  
    // left: 0;
    // right: 0;
    // margin: auto;
    :deep .keyboard-box {
      width: 100%;
    }
  }
  </style>